<script lang="ts">
export default {
	title: '示例图表2',
	icon: 'DocumentCopy',
	description: '示例图表无意义，可删除',
};
</script>
<template>
	<el-card class="relative h-full">
		<v-chart class="w-full" :option="option" style="height: 600px;" />
	</el-card>
</template>
<script setup lang="ts" name="log-line-chart">
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { TitleComponent, GridComponent, TooltipComponent, LegendComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([TitleComponent, LineChart, CanvasRenderer, GridComponent, TooltipComponent, LegendComponent, ToolboxComponent, MarkPointComponent, MarkLineComponent]);
const option = reactive({
	title: {
		text: 'Temperature Change in the Coming Week',
	},
	tooltip: {
		trigger: 'axis',
	},
	grid: {
		bottom: 50,
		left: 50
	},
	legend: {},
	toolbox: {
		show: true,
		feature: {
			dataZoom: {
				yAxisIndex: 'none',
			},
			dataView: { readOnly: false },
			magicType: { type: ['line', 'bar'] },
			restore: {},
			saveAsImage: {},
		},
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	},
	yAxis: {
		type: 'value',
		axisLabel: {
			formatter: '{value} °C',
		},
	},
	series: [
		{
			name: 'Highest',
			type: 'line',
			data: [10, 11, 13, 11, 12, 12, 25],
			markPoint: {
				data: [
					{ type: 'max', name: 'Max' },
					{ type: 'min', name: 'Min' },
				],
			},
			markLine: {
				data: [
					{
						name: '平均线',
						// 支持 'average', 'min', 'max'
						type: 'average',
					},
					{
						name: 'Y 轴值为 100 的水平线',
						yAxis: 21,
					},
					[
						{
							// 起点和终点的项会共用一个 name
							name: '最小值到最大值',
							type: 'min',
						},
						{
							type: 'max',
						},
					],
				],
			},
		},
		{
			name: 'Lowest',
			type: 'line',
			data: [1, -2, 2, 5, 3, 2, 0],
			markPoint: {
				data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
			},
			markLine: {
				data: [
					{ type: 'average', name: 'Avg' },
					[
						{
							symbol: 'none',
							x: '90%',
							yAxis: 'max',
						},
						{
							symbol: 'circle',
							label: {
								position: 'start',
								formatter: 'Max',
							},
							type: 'max',
							name: '最高点',
						},
					],
				],
			},
		},
	],
});
</script>
